<template>
  <div class="left-tabs-box">
    <el-tabs v-model="activeName" tab-position="left" style="height: 100%;">
      <el-tab-pane v-for="e in tabs" :key="e.name" :name="e.name" :label="e.label">
        <component :is="e.component" v-if="activeName == e.name" :app-setting="appSetting" :task-detail="taskDetail" />
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
import leftTabsHome from './home.vue'
import leftTabsActiveProcess from './activeProcess.vue'
import leftTabsAnswerAnalysis from './answerAnalysis.vue'
import leftTabsSuccessfulChallenge from './successfulChallenge.vue'
import leftTabsFailChallenge from './failChallenge.vue'
import leftTabsDraw from './draw.vue'
import leftTabsWinning from './winning.vue'
import leftTabsLosing from './losing.vue'
import leftTabsShareEffect from './shareEffect.vue'

export default {
  components: {

  },
  props: {
    taskDetail: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      activeName: 'home',
      tabs: [
        { name: 'home', label: '首页', component: leftTabsHome },
        { name: 'activeProcess', label: '活动过程', component: leftTabsActiveProcess },
        { name: 'answerAnalysis', label: '答案解析', component: leftTabsAnswerAnalysis },
        { name: 'successfulChallenge', label: '挑战成功', component: leftTabsSuccessfulChallenge },
        { name: 'failChallenge', label: '挑战失败', component: leftTabsFailChallenge },
        { name: 'draw', label: '抽奖页面', component: leftTabsDraw },
        { name: 'winning', label: '中奖页面', component: leftTabsWinning },
        { name: 'losing', label: '没中奖页', component: leftTabsLosing },
        { name: 'shareEffect', label: '分享效果', component: leftTabsShareEffect }
      ],
      appSetting: {
        home: { bgStyle: {}},
        activeProcess: {},
        answerAnalysis: {},
        successfulChallenge: {},
        failChallenge: {},
        shareEffect: {}
      }
    }
  }
}

</script>
